
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>跨域</title>
    <script src="./jquery-3.6.0.js"></script>
</head>
<body>
    

    <script>
        /*
            1.同源策略
                它是由 Netscape(网景公司) 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。
                同协议 同域名 同端口号  https（安全）=http+ssl证书（买）
                URL地址构成：协议+域名+端口号+路径+参数
                A===>B
                A:http://v.juhe.cn:80
                B:https://v.juhe.cn:80

                出现违背同源策略的现象就会发生跨域问题，但是注意跨域不代表数据请求失败，是浏览器的为了保护用户安全采取的一种
                自动拦截机制

            2.解决方案
                2.1jsonp  2.2前端代理proxy  2.3后端允许跨域请求（cors共享）
            3.jsonp
                jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
                jsonp跨域原理：
                在HTML中有些标签的src属性|href属性 获取远程资源的时候是不受同源策略影响的，比如script 、img、a等
                动态创建script标签利用其src不受跨域影响的优势，获取跨域数据，
                使用jquery更加方便
                jQuery ajax方式以jsonp类型发起跨域请求，其原理跟&lt;script&gt;>脚本请求一样，
                因此使用jsonp时也只能使用GET方式发起跨域请求。跨域请求需要服务端配合，设置callback，才能完成跨域请求。
        */


        // 跨域常见复现
        // 需要跨域的接口  http://suggestion.baidu.com/su?cb=getwd&wd=123

        // 正常方式请求跨域接口的数据  Access to XMLHttpRequest at 'http://localhost:8888/' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

        // $.ajax({
        //     // url:`http://localhost:8888/`,
        //     url:`http://suggestion.baidu.com/su?cb=getwd&wd=123`,
        //     success:res=> console.log("成功的结果是："+res ),
        //     fail: err=>console.log("失败的结果是："+err),
        //     complete:()=> console.log("最后会执行")
        // })
        

        // jsonp原理来进行访问
        // jsonp原理：  动态创建srcipt标签  使用script标签的src属性 script标签不受同源策略限制 来加载获取数据

        let script =  document.createElement("script")
        script.src = "http://suggestion.baidu.com/su?cb=getwd&wd=123"
        document.body.appendChild(script)

        // 用来接取服务端返回的数据
        function getwd(data) {
            console.log("百度接口的结果是",data);
            
        }




        // 跨域请求数据
        // $.ajax({
        //     url:`http://localhost:8888/`,
        //     dataType:"jsonp",
        //     jsonpCallback:"callback",
        //     success:res=> console.log("成功的结果是："+res.name),
        //     fail: err=>console.log("失败的结果是："+err),
        //     complete:()=> console.log("最后会执行")
        // })


        // $.ajax({
        //     url:`http://suggestion.baidu.com/su?wd=123`,
        //     dataType:"jsonp",
        //     jsonpCallback:"show",
        //     jsonp:"cb",
        //     success:res=> console.log("成功的结果是："+res.name),
        //     fail: err=>console.log("失败的结果是："+err),
        //     complete:()=> console.log("最后会执行")
        // })

        // function show(res) {
        //     console.log("百度接口的结果是",res);
            
        // }


    </script>
</body>
</html>